<template>
  <div>
    <div class="content" :class="contentPosition" :style="`width:${canvasWidth}px;height:${canvasWidth}px;`">
      <canvas v-show="rateVal > 0" id="canvas" :style="`width:${canvasWidth}px;height:${canvasWidth}px;`"></canvas>
      <div class="num-txt">{{ rateVal }}<span class="font-size-18">%</span></div>
    </div>
    <!-- <div class="control">
      <span>进度</span>
      <input type="range" min="0" max="100" step="1" id="rate" />
    </div> -->
    <!-- <div class="control">
      <span>波浪起伏度</span>
      <input type="range" min="5" max="60" step="1" id="wave" />
    </div>
    <div class="control">
      <span>波浪平滑度</span>
      <input type="range" min="200" max="600" step="1" id="flat" />
    </div>
    <div class="control">
      <span>波浪偏移量</span>
      <input type="range" min="0" max="200" step="1" id="distance" />
    </div>
    <div class="control">
      <span>波浪速度</span>
      <input type="range" min="1" max="12" step="1" id="speed" />
    </div> -->
  </div>
</template>
<script>
  // https://codepen.io/geeknoble/pen/PooQzwQ 原地址
  import { toFixedTwo } from '@/common/js/utils.js';

  export default {
    props: {
      //进度
      rate: {
        default: 0,
      },
    },

    watch: {
      rate: {
        handler(val) {
          this.rateVal = toFixedTwo(val)
          this.initColorSetting(this.rateVal);
          this.init();
        },
        deep: true,
      },
    },

    data() {
      return {
        normalColor: '',
        normalShadeColor: '',
        waveVal: 10, //波浪起伏度
        flatVal: 500, //波浪平滑度
        distanceVal: 100, //波浪偏移量
        speedVal: 6, //波浪速度
        contentPosition: '', //canvas偏移量
        canvasWidth: '', //canvas宽高
        rateVal:0
      };
    },

    methods: {
      initColorSetting(rate) {
        if (rate < 80) {
          this.normalColor = '#e02612';
          this.normalShadeColor = 'rgba(217, 48, 22, 0.5)';
        } else {
          this.normalColor = '#1c86d1';
          this.normalShadeColor = 'rgba(28, 134, 209, 0.5)';
        }
      },

      initPositionSetting() {
        let windowWidth = document.body.offsetWidth;
        if (windowWidth <= 1680) {
          this.contentPosition = 'content-position-s';
          this.canvasWidth = 138;
        } else if (1680 < windowWidth && windowWidth <= 1920) {
          this.contentPosition = 'content-position-m';
          this.canvasWidth = 250;
        }
      },

      drawSin(ctx, mW, color1, color2, wav, dY) {
        ctx.save();
        // var lineargradient = ctx.createLinearGradient(33, 0, 33, 66); // 创建一个线性渐变
        // lineargradient.addColorStop(0, color1);
        // lineargradient.addColorStop(1, color2);
        ctx.beginPath();
        ctx.moveTo(0, mW);
        ctx.lineTo(0, dY);
        // ctx.bezierCurveTo(mW / 4, dY - wav, (mW *3) / 4, dY + wav, mW, dY);
        ctx.quadraticCurveTo(mW / 4, dY - wav, mW / 2, dY);
        ctx.lineTo(mW / 2, dY);
        ctx.quadraticCurveTo((mW * 3) / 4, dY + wav, mW, dY);
        //  ctx.stroke();
        ctx.lineTo(mW, mW);
        ctx.lineTo(0, mW);
        ctx.fillStyle = color1;
        ctx.fill();
        ctx.restore();
      },

      drawCircle(ctx, mW, color) {
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.arc(mW / 2, mW / 2, mW / 2 - 1, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(mW / 2, mW / 2, mW / 2 - 2, 0, 2 * Math.PI);
        ctx.clip();
      },

      init() {
        var canvas1 = document.getElementById('canvas');

        var mW = this.canvasWidth;
        //   var mW = canvas1.clientWidth;
        // console.log(mW);
        // 设置Canvas元素的高
        canvas1.style.height = mW;
        // 设置Canvas画布的宽高
        canvas1.width = canvas1.height = mW;

        var canvas2 = document.createElement('canvas'),
          ctx2 = canvas2.getContext('2d');
        canvas2.width = mW;
        canvas2.height = mW;

        var canvas3 = document.createElement('canvas'),
          ctx3 = canvas3.getContext('2d');
        canvas3.width = mW;
        canvas3.height = mW;

        var x = 0,
          flat = 300,
          speed = 7,
          rate = 0.6,
          distance = 180,
          wave = 30;
        var rateDom = document.getElementById('rate'),
          flatDom = document.getElementById('flat'),
          speedDom = document.getElementById('speed'),
          distanceDom = document.getElementById('distance'),
          waveDom = document.getElementById('wave');

        //   rateDom.value = rate * 100;
        //   flatDom.value = flat;
        //   speedDom.value = speed;
        //   distanceDom.value = distance;
        //   waveDom.value = wave;
        let rateVal = this.rateVal;
        let waveVal = this.waveVal;
        let flatVal = this.flatVal;
        let distanceVal = this.distanceVal;
        let speedVal = this.speedVal;
        let normalColor = this.normalColor;
        let normalShadeColor = this.normalShadeColor;
        var ctx1 = canvas1.getContext('2d');

        this.drawCircle(ctx1, mW, '#ffffff');
        this.drawSin(ctx2, mW, this.normalColor, this.normalColor, wave, mW - mW * rate);
        this.drawSin(ctx3, mW, this.normalShadeColor, this.normalShadeColor, wave, mW - mW * rate);
        //  ctx1.drawImage(canvas2, 0, 0)

        var rate1 = rate,
          wave1 = wave,
          that = this;

        function animation() {
          rate = parseInt(rateVal) / 100;
          flat = parseInt(flatVal);

          if (rate !== rate1 || wave1 !== wave) {
            ctx2.clearRect(0, 0, mW, mW);
            ctx3.clearRect(0, 0, mW, mW);
            rate1 = rate;
            wave1 = wave;
            that.drawSin(ctx2, mW, normalColor, normalColor, wave, mW - mW * rate);
            that.drawSin(ctx3, mW, normalShadeColor, normalShadeColor, wave, mW - mW * rate);
          }

          speed = parseInt(speedVal);
          distance = parseInt(distanceVal);
          wave = parseInt(waveVal);

          ctx1.clearRect(0, 0, mW, mW);
          ctx1.drawImage(canvas2, x, 0, mW + flat, mW);
          ctx1.drawImage(canvas2, x - mW - flat, 0, mW + flat, mW);
          ctx1.drawImage(canvas3, x + distance, 0, mW + flat, mW);
          ctx1.drawImage(canvas3, x - mW + distance - flat, 0, mW + flat, mW);
          x >= mW - speed + flat ? (x = 0) : (x += speed);
          requestAnimationFrame(animation);
        }
        animation();
      }
    },

    mounted() {
      this.initPositionSetting();
    },
  };
</script>
<style scoped lang="scss">
  .content {
    width: 50%;
    margin: auto;
    position: absolute;
    .num-txt {
      width: 80px;
      text-align: center;
      font-size: 23px;
      position: absolute;
      color: rgb(226, 226, 226);
      top: 50%;
      left: 50%;
      margin-left: -36px;
      margin-top: -13px;
    }
  }

  .content-position-s {
    top: 121px;
    left: 31px;
  }

  .content-position-l {
    top: 92px;
    left: 49px;
  }

  .content-position-m {
    top: 67px;
    left: 55px;
  }

  .control {
    margin-top: 10px;
  }
</style>
